import React, { useEffect, useState, useRef } from 'react';

import './tip.scoped.less';

function Tip_c(props) {
  const { dom, value, direction } = props;
  const wrap = useRef();
  let direct = useRef({
    direction: '',
    left: 0,
    top: 0,
    rect: null,
    scale: '',
    to: '',
    iconTransform: 'translate(-50%, 0)',
    iconLeft: '',
    iconTop: '',
  });
  const [render, setRender] = useState(0);
  const triangle = 10; // 三角形宽高

  useEffect(() => {
    setTimeout(() => {
      const rect = wrap.current.getBoundingClientRect();
      let propsRect = JSON.parse(JSON.stringify(dom.getBoundingClientRect()));
      propsRect.top -= triangle;
      propsRect.height += triangle * 2;
      wrap.current.style.visibility = 'visible';
      let left = 0; // 父元素的中心点
      let top = 0; // 父元素的中心点
      let dirc = direction;
      if (direction === 'top') {
        left = propsRect.left + propsRect.width / 2;
        top = propsRect.top;
        direct.current.left = left - rect.width / 2;
        direct.current.top = top - rect.height;
        // 如果超出上边界
        if (direct.current.top < 0) {
          direct.current.top = propsRect.top + propsRect.height;
          dirc = 'bottom';
        }
      }
      if (direction === 'bottom') {
        left = propsRect.left + propsRect.width / 2;
        top = propsRect.top + propsRect.height;
        direct.current.left = left - rect.width / 2;
        direct.current.top = propsRect.top + propsRect.height;
        // 如果超出下边界
        if (direct.current.top + rect.height > window.innerHeight) {
          direct.current.top = propsRect.top - rect.height;
          dirc = 'top';
        }
      }

      if (direct.current.left < 0) {
        direct.current.left = 0;
      }
      if (direct.current.left + rect.width > window.innerWidth) {
        direct.current.left = window.innerWidth - rect.width;
      }
      direct.current.scale = 'scale0';

      setRender(Math.random());

      setTimeout(() => {
        direct.current.direction = dirc;
        direct.current.iconLeft = left;
        if (direct.current.direction === 'top') {
          direct.current.to = `${left - direct.current.left}px bottom`;

          direct.current.iconTop = propsRect.top;
        }
        if (direct.current.direction === 'bottom') {
          direct.current.to = `${left - direct.current.left}px top`;
          direct.current.iconTop = propsRect.top + propsRect.height;
          direct.current.iconTransform = 'translate(-50%, -100%) rotate(180deg)';
        }

        setRender(Math.random());
      }, 20);
    }, 0);
  }, []);

  return (
    <div>
      <div
        className={`tip ${direct.current.direction} ${direct.current.scale}`}
        style={{
          left: direct.current.left,
          top: direct.current.top,
          visibility: 'hidden',
          transformOrigin: direct.current.to,
        }}
        onMouseLeave={props.onMouseLeave}
        onMouseEnter={props.onMouseEnter}
        ref={wrap}
      >
        {value}
      </div>
      {direct.current.iconLeft && (
        <div
          className="triangle"
          onMouseLeave={props.onMouseLeave}
          onMouseEnter={props.onMouseEnter}
          style={{
            left: direct.current.iconLeft,
            top: direct.current.iconTop,
            transform: direct.current.iconTransform,
          }}
        ></div>
      )}
    </div>
  );
}

Tip_c.defaultProps = {
  onMouseLeave: () => {},
  onMouseEnter: () => {},
  direction: 'top',
};

export const Tip = Tip_c;

export default { Tip };
